import React from "react";

import { COLORS, Colors } from "styles/var/colors";
// import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes";

interface IGitOpsModeIconProps {
  // size?: IconSizes;
  color?: Colors;
}

const GitOpsMode = ({
  // size = "small",
  color = "ui-fleet-black-75",
}: IGitOpsModeIconProps) => {
  // const iconSize = ICON_SIZES[size];
  return (
    <svg
      // TODO - product redesign icon with square aspect ratio to allow dynamic sizing
      // width={iconSize}
      // height={iconSize}
      // viewBox={`0 0 ${iconSize} ${iconSize}`}
      width="12"
      height="13"
      viewBox="0 0 12 13"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M3.375 4.87499L2.625 4.87499V4.87499H3.375ZM3.75 10.875C3.75 11.0821 3.58211 11.25 3.375 11.25V12.75C4.41053 12.75 5.25 11.9105 5.25 10.875H3.75ZM3.375 11.25C3.16789 11.25 3 11.0821 3 10.875H1.5C1.5 11.9105 2.33947 12.75 3.375 12.75V11.25ZM3 10.875C3 10.6679 3.16789 10.5 3.375 10.5V9C2.33947 9 1.5 9.83947 1.5 10.875H3ZM3.375 10.5C3.58211 10.5 3.75 10.6679 3.75 10.875H5.25C5.25 9.83947 4.41053 9 3.375 9V10.5ZM10.125 7.875C10.125 8.08211 9.95711 8.25 9.75 8.25V9.75C10.7855 9.75 11.625 8.91053 11.625 7.875H10.125ZM9.75 8.25C9.54289 8.25 9.375 8.08211 9.375 7.875H7.875C7.875 8.91053 8.71447 9.75 9.75 9.75V8.25ZM9.375 7.875C9.375 7.66789 9.54289 7.5 9.75 7.5V6C8.71447 6 7.875 6.83947 7.875 7.875H9.375ZM9.75 7.5C9.95711 7.5 10.125 7.66789 10.125 7.875H11.625C11.625 6.83947 10.7855 6 9.75 6V7.5ZM3.75 2.625C3.75 2.83211 3.58211 3 3.375 3V4.5C4.41053 4.5 5.25 3.66053 5.25 2.625H3.75ZM3.375 3C3.16789 3 3 2.83211 3 2.625H1.5C1.5 3.66053 2.33947 4.5 3.375 4.5V3ZM3 2.625C3 2.41789 3.16789 2.25 3.375 2.25V0.75C2.33947 0.75 1.5 1.58947 1.5 2.625H3ZM3.375 2.25C3.58211 2.25 3.75 2.41789 3.75 2.625H5.25C5.25 1.58947 4.41053 0.75 3.375 0.75V2.25ZM3.375 4.09038C4.125 4.09038 4.125 4.09037 4.125 4.09036C4.125 4.09035 4.125 4.09034 4.125 4.09032C4.125 4.09027 4.125 4.09021 4.125 4.09013C4.125 4.08997 4.125 4.08973 4.125 4.0894C4.125 4.08876 4.125 4.08781 4.125 4.08656C4.125 4.08406 4.125 4.08039 4.125 4.07569C4.125 4.0663 4.125 4.0528 4.125 4.03637C4.125 4.00353 4.125 3.95899 4.125 3.91223C4.125 3.81871 4.125 3.71629 4.125 3.68071C4.125 3.67626 4.125 3.67286 4.125 3.67065C4.125 3.66954 4.125 3.66873 4.125 3.66825C4.125 3.668 4.125 3.66784 4.125 3.66777C4.125 3.6673 4.125 3.66795 4.125 3.66845C3.37468 4.41767 2.625 3.66777 2.625 3.66775C2.625 3.66775 2.625 3.66774 2.625 3.66776C2.625 3.66838 2.625 3.67436 2.625 3.68692C2.625 3.712 2.625 3.76327 2.625 3.85017C2.625 4.02397 2.625 4.34034 2.625 4.87499L4.125 4.87499C4.125 4.34034 4.125 4.02397 4.125 3.85017C4.125 3.76327 4.125 3.712 4.125 3.68691C4.125 3.67439 4.125 3.66836 4.125 3.6677C4.125 3.66768 4.125 3.66764 4.125 3.66762C4.125 3.66758 3.37532 2.91767 2.625 3.6669C2.625 3.66724 2.625 3.6676 2.625 3.66763C2.625 3.66765 2.625 3.66768 2.625 3.66771C2.625 3.66781 2.625 3.66798 2.625 3.66823C2.625 3.66872 2.625 3.66953 2.625 3.67064C2.625 3.67285 2.625 3.67625 2.625 3.6807C2.625 3.71629 2.625 3.81871 2.625 3.91223C2.625 3.95899 2.625 4.00353 2.625 4.03637C2.625 4.0528 2.625 4.0663 2.625 4.07569C2.625 4.08039 2.625 4.08406 2.625 4.08656C2.625 4.0878 2.625 4.08876 2.625 4.0894C2.625 4.08972 2.625 4.08997 2.625 4.09013C2.625 4.09021 2.625 4.09027 2.625 4.09031C2.625 4.09033 2.625 4.09035 2.625 4.09036C2.625 4.09037 2.625 4.09037 3.375 4.09038ZM2.625 4.87499V9.89513H4.125V4.87499H2.625ZM2.625 4.87499C2.625 6.22752 3.34275 7.39654 4.48217 8.09712C5.61733 8.79507 7.14267 9.01866 8.8069 8.60261L8.4431 7.14739C7.10733 7.48134 6.00767 7.27422 5.26783 6.81933C4.53225 6.36705 4.125 5.66106 4.125 4.87499L2.625 4.87499Z"
        fill={COLORS[color]}
      />
    </svg>
  );
};

export default GitOpsMode;
